{% extends "myadmin/base.html" %}

{% block main_body %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
      菜品管理
      <small>订餐系统后台管理</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
      <li class="active">菜品分类信息管理</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
              <h2 class="box-title"> <span class="glyphicon glyphicon-calendar" aria-hidden="true">添加菜品分类信息</h2>
          </div>
          <!-- /.box-header -->
          <!-- form start -->
          <form class="form-horizontal" action="{% url 'myadmin_product_insert' %}" method="post" enctype="multipart/form-data" >
            <!-- 添加令牌 -->
            {% csrf_token %} 
            <div class="box-body">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">店铺名称：</label>
                <div class="col-sm-4">
                  <select name="shop_id" id="shop_id" onchange="doLoadCategory()" class="form-control select2" style="width: 100%;">
                    {% for svo in shoplist %}
                      <option value="{{svo.id}}">{{svo.name}}</option>
                    {% endfor %}
                  </select>   
                </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">菜品分类：</label>
                <div class="col-sm-4">
                  <select name="category_id" id="category_id" class="form-control select2" style="width:100%;"></select>
                </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">菜品名称：</label>
                <div class="col-sm-4">
                  <input type="text" name="name" class="form-control">
                </div>                
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">单价：</label>
                <div class="col-sm-4">
                  <input type="text" name="price" class="form-control">
                </div>
                
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">菜品图片：</label>
                <div class="col-sm-4">
                  <input type="file" name="cover_pic" >
                </div>
                

              </div>            
            
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button> &nbsp; 
                <button type="submit" class="btn btn-default">重置</button>
              <div class="col-sm-offset-2 col-sm-10">
            </div>
            <!-- /.box-footer -->
          </form>
        </div>
        <!-- /.box -->
      </div>
    </div>

  </section>
  <!-- /.content -->

{% endblock %}

{% block loadjavascript %}
<script type="text/javascript">
  // 自定义函数，实现通过店铺id,Ajax加载对应的菜品分类信息
  function doLoadCategory(){
    // 获取选中的id号
    var id = $("#shop_id").val();
    $("#category_id").empty();
    $.ajax({
      url:"/myadmin/category/load/"+id,
      type:'get',
      data:{},
      dataType:'json',
      success:function(res){
        if(res.data.length<1)
          retuen;
        var data = res.data;
        var select = $("#category_id")
        for(var i=0;i<data.length;i++){
          $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)

        }
      }
    });
  }
  doLoadCategory()
</script>
{% endblock %}